<template>
  <div class="image-container">
    <el-link
      href="http://www.dangjian.cn/xxgcxjpxsd.html"
      target="_blank"
      class="image-wrapper left"
    >
      <img src="@/assets/pic/Home/Home_2.jpg" alt="Home 2" class="image" />
    </el-link>
    <div class="divider"></div>
    <el-link
      href="http://www.dangjian.cn/xxgcxjpxsd.html"
      target="_blank"
      class="image-wrapper right"
    >
      <img src="@/assets/pic/Home/Home_1.png" alt="Home 1" class="image" />
    </el-link>
  </div>
</template>

<script setup>
</script>

<style scoped>
.image-container {
  display: flex;
  align-items: stretch; /* 垂直拉伸，确保两张图片高度相同 */
  width: 100%; /* 设置为全宽 */
  height: 80px; /* 固定高度为100px */
}

.image-wrapper {
  flex: 2; /* 每个宽度均等分配 */
  position: relative; /* 用于相对定位 */
  overflow: hidden; /* 隐藏溢出的部分 */
}

.image {
  width: 100%; /* 使图片填满父容器的宽度 */
  height: 100%; /* 固定高度 */
  object-fit: cover; /* 保持图片比例，同时填满容器 */
  transition: transform 1s ease; /* 放大过渡效果，增加持续时间 */
}

.image-wrapper:hover .image {
  transform: scale(1.05); /* 悬浮时放大（轻微放大） */
}

.divider {
  width: 2px; /* 分隔线宽度 */
  background: black; /* 分隔线颜色 */
  border-left: 2px dashed black; /* 虚线效果 */
  height: 100%; /* 高度与容器相同 */
}
</style>
